<script setup>
import Git from "@/static/image/git.jpg"; // 推荐

const handleTap = () => {
  console.log("点击了");
};

const handleToHome = () => {
  // 路径后不能带参数
  uni.switchTab({
    url: "/pages/home/index",
  });
};
const handleToDetails = () => {
  // query传参
  // uni.navigateTo({
  //   url: "/pagesA/details/index?id=1",
  // });
  uni.navigateTo({
    url: "/pagesA/details/index",
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      toSubassembly: function (data) {
        console.log(data);
      },
      someEvent: function (data) {
        console.log(data);
      },
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("toDetails", {
        data: "父给子传参了",
      });
    },
  });
};
const handleRedirectTo = () => {
  uni.redirectTo({
    url: "/pagesA/details/index?id=1",
  });
};
const handleReLaunchTo = () => {
  uni.reLaunch({
    url: "/pagesA/details/index?id=1",
  });
};
</script>
<template>
  <view>
    <image :src="Git" mode="aspectFit" />
    <image src="@/static/image/git.jpg" mode="aspectFit" />
    <!-- 使用相对路径 -->
    <image src="../../static/image/git.jpg" mode="aspectFit" />
    <!-- <web-view
      src="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html"
      :fullscreen="false"
    ></web-view> -->
    <button @tap="handleTap">点击事件</button>
    <view class="test-css">测试css</view>
    <view class="test-rcss">测试css</view>
    <button @tap="handleToHome">跳转到首页</button>
    <button @tap="handleToDetails">跳转到详情</button>
    <button @tap="handleRedirectTo">跳转到详情redirectTo</button>
    <button @tap="handleReLaunchTo">跳转到详情reLaunch</button>
  </view>
</template>

<style lang="scss" scoped>
image {
  width: 80px;
}
.test-css {
  width: 100px;
  height: 100px;
  background-color: red;
}
.test-rcss {
  width: 200rpx;
  height: 200rpx;
  background-color: blue;
}
</style>
